<template>
	<view class="w-100 h-100">
		<!-- 两端中间对齐 -->
		<view class="d-flex-yCenter-sb w-100 h-100">
			<view class="" :style="{color:stycolor}" v-if="!leftslot">
				{{lefttext}}
			</view>
			<view class="" v-if="leftslot">
				<slot name="lefttext"></slot>
			</view>
			<view class="" v-if="!rightslot">
				{{righttext}}
			</view>
			<view class="" v-if="rightslot">
				<slot name="righttext"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	// 两边对齐的太多  直接封装一个组件  leftslot rightslot为true的时候 为插槽  为false的时候 为props  因为有的显示的数据含有箭头图片 props传输不方便
	export default {
		data() {
			return {

			}
		},
		props: {
			rightslot: {
				type: Boolean,
				default: false
			},
			leftslot: {
				type: Boolean,
				default: false
			},
			lefttext: {
				type: String,
				default: ''
			},
			righttext: {
				type: String,
				default: ''
			},
			stycolor: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style>
	.d-flex-yCenter-sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.w-100 {
		width: 100%;
	}

	.h-100 {
		height: 100%;
	}
</style>
